ARIA
Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).
The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow to communicate an important message and require a response.
Dialogs can have a close button in the header.
Dialogs can have an 'OK', 'Cancel' or 'Close' button in the footer.
dialog
The '<dialog>' element is semantically equivelant to 'role="dialog"' so the attribute should not be required but for the sake of polyfill include the attribute for backward compatibility.
<div id="modal_overlay">
<dialog role="dialog" id="dialog_1" aria-modal="true" aria-labelledby="dialog_1_title" aria-describedby="dialog_1_description" open="open">
<header>
<h2 id="dialog_1_title">Your personal details were successfully updated</h2>
<button aria-label="Close">X</button>
</header>
<p id="dialog_1_description">You can change your details at any time in the user account section.</p>
<footer>
<button>Close</button>
</footer>
</dialog>
</div>
alertdialog
<dialog id="dialog_1" role="alertdialog" aria-labelledby="dialog_1_title" aria-describedby="dialog_1_description" open="open">
<header>
<h2 id="dialog_1_title">Your login session is about to expire</h2>
</header>
<p id="dialog_1_description">To extend your session, click the OK button.</p>
<footer>
<button>OK</button>
</footer>
</dialog>